import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button, Card, Typography, Spin, Space } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { ApiService } from '../services/api';
import './NewsDetailPage.css';

const { Title } = Typography;

const NewsDetailPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [newsDetail, setNewsDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 获取行业资讯详情
  useEffect(() => {
    const fetchNewsDetail = async () => {
      if (!id) {
        navigate('/news');
        return;
      }

      try {
        setLoading(true);
        setError(null);
        
        const response = await ApiService.getIndustryNewsDetail(id);
        
        if (response.code === '0000' && response.data) {
          setNewsDetail(response.data);
        } else {
          setError('获取资讯详情失败');
        }
      } catch (err) {
        console.error('获取资讯详情失败:', err);
        setError('网络请求失败');
      } finally {
        setLoading(false);
      }
    };

    fetchNewsDetail();
  }, [id, navigate]);

  const handleBack = () => {
    navigate(-1);
  };

  if (loading) {
    return (
      <div className="news-detail-page">
        <div className="container">
          <div className="back-button">
            <Button 
              icon={<ArrowLeftOutlined />} 
              onClick={handleBack}
              size="large"
            >
              返回
            </Button>
          </div>
          <div className="loading-container">
            <Spin size="large" />
            <p>加载资讯详情中...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="news-detail-page">
        <div className="container">
          <div className="back-button">
            <Button 
              icon={<ArrowLeftOutlined />} 
              onClick={handleBack}
              size="large"
            >
              返回
            </Button>
          </div>
          <div className="error-container">
            <p>{error}</p>
          </div>
        </div>
      </div>
    );
  }

  if (!newsDetail) {
    return (
      <div className="news-detail-page">
        <div className="container">
          <div className="back-button">
            <Button 
              icon={<ArrowLeftOutlined />} 
              onClick={handleBack}
              size="large"
            >
              返回
            </Button>
          </div>
          <div className="no-content">
            <p>资讯内容不存在</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="news-detail-page">
      <div className="container">
        {/* 返回按钮 */}
        <div className="back-button">
          <Button 
            icon={<ArrowLeftOutlined />} 
            onClick={handleBack}
            size="large"
          >
            返回
          </Button>
        </div>

        {/* 资讯详情内容 */}
        <Card className="news-detail-card">
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            {/* 资讯标题 */}
            <div>
              <Title level={1} className="news-detail-title">
                {newsDetail.newsTitle}
              </Title>
              <div className="news-detail-meta">
                <span className="news-date">
                  {newsDetail.newTime ? new Date(newsDetail.newTime).toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                  }) : ''}
                </span>
              </div>
            </div>

            {/* 资讯配图 */}
            {newsDetail.picUrl && (
              <div className="news-detail-image">
                <img 
                  src={newsDetail.picUrl} 
                  alt={newsDetail.newsTitle}
                  className="news-main-image"
                  onError={(e) => {
                    e.target.style.display = 'none';
                  }}
                />
              </div>
            )}

            {/* 资讯富文本内容 */}
            {newsDetail.newsItemContentBind && (
              <div className="news-detail-content">
                <div 
                  className="news-rich-content"
                  dangerouslySetInnerHTML={{ __html: newsDetail.newsItemContentBind }}
                />
              </div>
            )}

            {/* 上一篇/下一篇导航 */}
            {(newsDetail.lastNewId || newsDetail.nextNewId) && (
              <div className="news-navigation">
                <Space size="large">
                  {newsDetail.lastNewId && (
                    <Button 
                      onClick={() => navigate(`/news/${newsDetail.lastNewId}`)}
                    >
                      上一篇
                    </Button>
                  )}
                  {newsDetail.nextNewId && (
                    <Button 
                      onClick={() => navigate(`/news/${newsDetail.nextNewId}`)}
                    >
                      下一篇
                    </Button>
                  )}
                </Space>
              </div>
            )}
          </Space>
        </Card>
      </div>
    </div>
  );
};

export default NewsDetailPage;
